<template>
  <div>
    <el-table v-bind="tableProps">
      <template v-for="({children,...column}, idx) in columns">
        <el-table-column v-if="children" :key="column.id || idx" v-bind="column">
          <template slot-scope="scope">
            <template v-for="(child, childIdx) in children">
              <!-- 如果是按钮 -->
              <el-button v-if="child.type==='button'" :key="childIdx" v-bind="columnChildPropsMapper(scope,child.key)" @click="(e)=>$emit('onEvent','btn-click',child.key,scope.row,e)">
                {{ child.name }}
              </el-button>
              <!-- 如果是标签 -->
              <el-tag v-if="child.type==='tag'" :key="childIdx" v-bind="columnChildPropsMapper(scope,child.key)" @click="(e)=>$emit('onEvent','tag-click',child.key,scope.row,e)">
                {{ child.name }}
              </el-tag>
              <!-- 如果是图标 -->
              <i v-if="child.type==='icon'" :key="childIdx" v-bind="columnChildPropsMapper(scope,child.key)" />
            </template>

          </template>
        </el-table-column>

        <el-table-column v-else :key="column.id || idx" v-bind="column" />

      </template>
    </el-table>
    <el-pagination
      class="custom-pagination"
      v-bind="{...DEFAULT_PAGINATION_PROPS,...paginationProps}"
      @current-change="(currentPage)=>$emit('onEvent','current-change',currentPage)"
      @size-change="(currentSize)=>$emit('onEvent','size-change',currentSize)"
    />
  </div>
</template>

<script>
const DEFAULT_PAGINATION_PROPS = {
  'page-size': 5,
  'page-sizes': [5, 10, 15, 20],
  'layout': 'sizes,total,prev,pager,next',
  'total': 16
}
export default {
  name: '',
  components: {

  },
  props: {
    columns: {
      type: Array,
      required: true
    },
    tableProps: {
      type: Object,
      required: true
    },
    // 列表项-children项-props的映射器
    columnChildPropsMapper: {
      type: Function,
      required: true
    },
    paginationProps: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      DEFAULT_PAGINATION_PROPS
    }
  },
  mounted() {
    console.log(this.tableProps.data)
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custom-pagination{
  float: right;
}
.custom-table::after{
  content:'';
  display: block;
  clear:both;
  height: 0;
  visibility: hidden;
}
</style>
